<template>
    <div class="popup">
        <el-upload
            class="upload-demo"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
        >
            <el-button size="small" type="primary">点击上传</el-button>
        </el-upload>

        <el-switch
            v-model="value"
            active-text="按月付费"
            inactive-text="按年付费"
        >
        </el-switch>
    </div>
</template>

<script>
import { sendMessageToContentScript } from "../utils/fns";

const url =
    "https://momentum.photos/img/2eff809e-7c18-44c0-9f71-d86e448f9b14.jpg?momo_cache_bg_uuid=1162cbbc-5df8-4904-b107-bbaee02e0c9e";
const json = {
    backgrounds: [
        {
            filename: "backgrounds/f72e1572-c291-48ac-b45c-6d8a5c1a15c0.jpg",
            title: "Above Ho Chi Minh City, Vietnam",
            source: "Kien Do",
            sourceUrl: "https://unsplash.com/kiendo",
            id: "f72e1572-c291-48ac-b45c-6d8a5c1a15c0",
            widgetColor: {
                hsla: "hsla(188, 43%, 27%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/969d71e6-2126-4313-a5d7-9a28ebc78837.jpg",
            title: "Pyrenees Mountains",
            source: "Iris Vallejo",
            sourceUrl:
                "http://pixabay.com/en/pyrenees-mountains-snow-zenith-351266/",
            id: "969d71e6-2126-4313-a5d7-9a28ebc78837",
            widgetColor: {
                hsla: "hsla(209, 30%, 45%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/4f250311-39cb-4aff-9050-87eb462f7f08.jpg",
            title: "Kerepakupai Meru, Venezuela",
            source: "AirPano",
            sourceUrl:
                "https://500px.com/photo/98450677/churun-meru-(dragon)-waterfall-venezuela-by-airpano",
            id: "4f250311-39cb-4aff-9050-87eb462f7f08",
            widgetColor: {
                hsla: "hsla(105, 23%, 40%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/c16b3483-3f6a-433b-acdf-f5ded8beba79.jpg",
            title: "China",
            source: "AirPano",
            sourceUrl:
                "http://www.airpano.com/Photogallery-Photo.php?author=2&photo=58",
            id: "c16b3483-3f6a-433b-acdf-f5ded8beba79",
            widgetColor: {
                hsla: "hsla(251, 6%, 39%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/ba77f3db-1701-49a7-bd67-4f98edd92747.jpg",
            title: "Urnersee Lake, Switzerland",
            source: "Tanya Mishchenko",
            sourceUrl: "https://www.flickr.com/photos/tanyush/9293898520",
            id: "ba77f3db-1701-49a7-bd67-4f98edd92747",
            widgetColor: {
                hsla: "hsla(187, 60%, 34%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/4ea1221c-78f0-4952-a3c6-f16acb33b57f.jpg",
            title: "Mt. Teide, Canary Islands",
            source: "Michael Bolognesi",
            sourceUrl: "https://www.flickr.com/photos/bollan/10361139534/",
            id: "4ea1221c-78f0-4952-a3c6-f16acb33b57f",
            widgetColor: {
                hsla: "hsla(255, 20%, 25%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/6375bb99-9cac-42ff-8f4d-270505fdd1ba.jpg",
            title: "Port Angeles, Washington, USA",
            source: "Isaac Gautschi",
            sourceUrl: "https://www.facebook.com/IsaacGautschiPhotography",
            id: "6375bb99-9cac-42ff-8f4d-270505fdd1ba",
            widgetColor: {
                hsla: "hsla(223, 17%, 24%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/ff33de87-2620-48bb-87f4-9c77b221ac08.jpg",
            title: "Kalalau, Hawaii, USA",
            source: "Romain Guy",
            sourceUrl: "https://www.flickr.com/photos/romainguy/6986733231/",
            id: "ff33de87-2620-48bb-87f4-9c77b221ac08",
            widgetColor: {
                hsla: "hsla(200, 47%, 39%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/4b71326f-9007-4519-8e02-8f789caaad6e.jpg",
            title: "County Clare, Ireland",
            source: "Kwiatek7",
            sourceUrl:
                "http://www.shutterstock.com/pic-131723969/stock-photo-cliffs-of-moher-at-sunset-co-clare-ireland.html",
            id: "4b71326f-9007-4519-8e02-8f789caaad6e",
            widgetColor: {
                hsla: "hsla(178, 37%, 35%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/8625d9f3-c059-4dc6-b915-37bb5ea7e6a3.jpg",
            title: "Rio de Janeiro, Brazil",
            source: "airpano",
            sourceUrl:
                "http://www.airpano.ru/files/Rio-de-Janeiro-Brazil/2-2?from=momentum",
            id: "8625d9f3-c059-4dc6-b915-37bb5ea7e6a3",
            widgetColor: {
                hsla: "hsla(350, 24%, 48%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/4d1cd7aa-1b6f-49a0-8e0b-b65c73a53ad8.jpg",
            title: "Bariloche, Argentina",
            source: "Wieslaw Olejniczak",
            sourceUrl:
                "https://500px.com/photo/32006633/bariloche-by-wieslaw-olejniczak",
            id: "4d1cd7aa-1b6f-49a0-8e0b-b65c73a53ad8",
            widgetColor: {
                hsla: "hsla(193, 30%, 35%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/68db4265-fa19-408a-81bc-d8ebed6537db.jpg",
            title: "Mu Cang Chai, Vietnam",
            source: "Valeriy Shcherbina",
            sourceUrl: "http://moda.sh/mu-cang-chai-by-valeriy-shcherbina",
            id: "68db4265-fa19-408a-81bc-d8ebed6537db",
            widgetColor: {
                hsla: "hsla(15, 26%, 46%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/08b89e75-c03a-41aa-9cb6-d3dd822cdfbe.jpg",
            title: "Hoher Kasten, Appenzell Alps, Switzerland",
            source: "Jan Thoma",
            sourceUrl: "http://janthoma.ch/",
            id: "08b89e75-c03a-41aa-9cb6-d3dd822cdfbe",
            widgetColor: {
                hsla: "hsla(150, 20%, 30%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/92c873f2-835d-437c-b08f-2332adf19f00.jpg",
            title: "Rock Islands, Palau",
            source: "Unknown",
            sourceUrl: "http://moda.sh/destination-palau",
            id: "92c873f2-835d-437c-b08f-2332adf19f00",
            widgetColor: {
                hsla: "hsla(193, 100%, 30%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/3068befa-45dd-491c-a506-66b86a5c65f4.jpg",
            title: "Plougonvelin, France",
            source: "Frederic Le Mouillour",
            sourceUrl: "http://www.flickr.com/people/frederic29/",
            id: "3068befa-45dd-491c-a506-66b86a5c65f4",
            widgetColor: {
                hsla: "hsla(224, 24%, 46%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/5740fe48-d74e-4d95-8ec7-8c1f738cabc0.jpg",
            title: "Celano, Abruzzi, Italy",
            source: "Luca Montanari",
            sourceUrl: "http://www.flickr.com/photos/luca_montanari/8321880331",
            id: "5740fe48-d74e-4d95-8ec7-8c1f738cabc0",
            widgetColor: {
                hsla: "hsla(17, 45%, 35%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/31fcda47-100b-42e1-a513-c6aa09c3b2dd.jpg",
            title: "Stunted Pine",
            source: "Jyrki Salmi",
            sourceUrl: "http://www.flickr.com/photos/salman2000/9321259912/",
            id: "31fcda47-100b-42e1-a513-c6aa09c3b2dd",
            widgetColor: {
                hsla: "hsla(330, 12%, 28%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/d6e0923c-8f38-4727-99f2-fd104ecce5da.jpg",
            title: "Mu Cang Chai, Vietnam",
            source: "tu_geo",
            sourceUrl: "http://www.flickr.com/photos/23866512@N05",
            id: "d6e0923c-8f38-4727-99f2-fd104ecce5da",
            widgetColor: {
                hsla: "hsla(215, 54%, 42%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/3ad1de40-4785-4e31-bd98-be80575c5553.jpg",
            title: "Space",
            source: "Unknown",
            sourceUrl: "http://eskipaper.com/outer-space-wallpaper-23.html",
            id: "3ad1de40-4785-4e31-bd98-be80575c5553",
            widgetColor: {
                hsla: "hsla(238, 15%, 34%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/9b5ad3aa-31a8-473c-86da-cecd53eca8e6.jpg",
            title: "Zug, Switzerland",
            source: "Magdalena Roeseler",
            sourceUrl:
                "https://www.flickr.com/photos/magdalenaroeseler/10497301253",
            id: "9b5ad3aa-31a8-473c-86da-cecd53eca8e6",
            widgetColor: {
                hsla: "hsla(33, 55%, 40%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/201ef627-c78f-4c96-91ae-8fa0adb09346.jpg",
            title: "Paptsdorf, Germany",
            source: "skoeber",
            sourceUrl: "https://www.flickr.com/photos/asphericlens/7227178308",
            id: "201ef627-c78f-4c96-91ae-8fa0adb09346",
            widgetColor: {
                hsla: "hsla(212, 24%, 36%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/1c4fd43d-e3ca-4dfb-a891-e14ba5af01ea.jpg",
            title: "Li Jiang, China",
            source: "Trey Ratcliff",
            sourceUrl:
                "https://www.flickr.com/photos/stuckincustoms/11114091294/",
            id: "1c4fd43d-e3ca-4dfb-a891-e14ba5af01ea",
            widgetColor: {
                hsla: "hsla(10, 44%, 32%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/7efb1557-cf57-4ae3-b07a-ec2175679d1c.jpg",
            title: "Glenorchy, New Zealand",
            source: "Trey Ratcliff",
            sourceUrl:
                "https://www.flickr.com/photos/stuckincustoms/8498614095",
            id: "7efb1557-cf57-4ae3-b07a-ec2175679d1c",
            widgetColor: {
                hsla: "hsla(211, 46%, 35%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
        {
            filename: "backgrounds/bc02cd92-13e1-4bc3-8020-b0acf5c80880.jpg",
            title: "San Francisco, California, USA",
            source: "Romain Guy",
            sourceUrl: "https://www.flickr.com/photos/romainguy/3409068082/",
            id: "bc02cd92-13e1-4bc3-8020-b0acf5c80880",
            widgetColor: {
                hsla: "hsla(213, 40%, 40%, 0.95)",
                bodyTextColor: "#fff",
            },
        },
    ],
};

export default {
    name: "App",
    data() {
        return {
            fileList: [],
            value: false,
        };
    },
    watch: {
        value: {
            handler(val) {
                sendMessageToContentScript(
                    { type: "test", value: val },
                    function(res) {
                        console.log("收到回复：%o", res);
                    }
                );
            },
        },
    },
    mounted() {},
    methods: {
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        handleExceed(files, fileList) {
            this.$message.warning(
                `当前限制选择 3 个文件，本次选择了 ${
                    files.length
                } 个文件，共选择了 ${files.length + fileList.length} 个文件`
            );
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
    },
};
</script>

<style>
html {
    width: 400px;
    height: 400px;
}
</style>
